<template>
  <div class="box">
    <div class="left">
      <div class="member">访问次数</div>
      <div class="number">12,256</div>
      <div class="btn">查看详情</div>
    </div>
    <div ref="chart1" class="chart"></div>
  </div>
</template>
<script >
export default {
  name: 'TopLeft',
  mounted() {
    this.echartsInit()
  },
  methods: {
    echartsInit() {
      const options = {
        xAxis: {
          show: false,
          type: 'category',
          data: ['1', '2', '3', '4', '5', '6', '7', '8', '9', '10', '11', '12']
        },
        yAxis: [
          {
            show: false,
            type: 'value',
            splitNumber: 6 // 必须加这个，标识数值刻度区间只能存在6个
          }

        ],
        grid: {
          top: '0%',
          right: '0%',
          bottom: '0%',
          left: '0%',
          containLabel: true
        },

        series: [
          {
            data: [50, 30, 224, 218, 135, 147, 260, 218, 180, 200, 120, 45],
            type: 'bar',
            barWidth: 15,
            barGap: '10%',
            itemStyle: {

              borderRadius: [5, 5, 5, 5],
              color: function (params) {
                const colorArr = ['#2cab40', '#86df6c'] // colorArr.length 为3，通过取模的方式就可以循环使用颜色了
                if ((params.dataIndex + 1) % 2 === 0) {
                  return colorArr[0]
                } else {
                  return colorArr[1]
                }
              }

            }

          }
        ]
      }
      const myChart = this.$echarts.init(this.$refs.chart1)
      myChart.setOption(options)
      window.addEventListener('resize', () => {
        myChart.resize()
      })
    }
  }
}
</script>

<style scoped lang="scss">
.box{
  display: flex;
  //align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  width: 28.49vw;
  height: 10.156vw;
  padding: 0 1.563vw;
  background-color:rgb(44 171 64 / 5%);
  border-radius: 0.26vw;

  .left{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    box-sizing: border-box;
    padding: 1.563vw 0;

    .member{
      font-weight: 600;
      font-size: 1.042vw;
    }

    .number{
      font-weight: 700;
      font-size: 1.563vw;
    }

    .btn{
      width: 5.208vw;
      height: 1.823vw;
      color: white;
      line-height: 1.823vw;
      text-align: center;
      background-color: #2cab40;
      border-radius: 2.344vw;
      cursor: pointer;
    }
  }

  .chart{
    width: 17.656vw;
    height: 7.292vw;
    margin-top: 2.083vw;
  }

}
</style>
